<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Drag marker</title>
<style type="text/css">
v\:* {
behavior:url(#default#VML);
}

BODY { font-family: Arial; font-size: small;
background-color: #CCCCFF;}

A:hover {color: red; text-decoration: underline; }


</style>
<script 
src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAYxpy0HiKBWXiyhVrpVqkshTWg_xmhpETXrjHUj59zHLsinrq_xSAmAGIHF6kJpo3mJn5WnKDztG7kw"type="text/javascript">
</script>
</head>

<body>

<div id="forehead" style="position: absolute; top:0px;left:10px;width: 550px; height: 40px"><h2>Esa's Google Maps 

API examples</h2>
</div>

<div id="novel" style="position: absolute; top:60px; left:600px; width:360px; height:600px; text-align:left">

<h3>Dragging a marker v2.46+</h3>
An option to make markers draggable was given to us with v2.46. There are three markers on the map. One of them

is not specified draggable.
<p>
Point of the dragged marker is returned by .getPoint() method and updated by 'drag' event available from a 

draggable marker.<br/>
<input type="text" id="location" style="width:10;"/>
<p>
Do not confuse mouse pointer point with that:<br/>
<input type="text" id="mouse" style="width:10;"/>


</p><p>

<a href="http://koti.mbnet.fi/ojalesa/exam/index.html">Index</a>

</p><p>gmapsapiATgmailDOTcom
</p>

<h3>Continuous zoom v2.58+</h3>
Animated continuous zoom scales the map tiles when zoom setting is changed a single step.
</div>

<div id="map" style="position: absolute; top:60px;left:10px;width:512px; height:400px"></div>



<script type="text/javascript">
//<![CDATA[


////map
      

var map = new GMap2(document.getElementById("map"));
//var start = new GLatLng(65,25);
map.setCenter(new GLatLng(65,25), 4);
map.addControl(new GMapTypeControl(1));
map.addControl(new GLargeMapControl());

map.enableContinuousZoom();
map.enableDoubleClickZoom();



// "tiny" marker icon
var icon = new GIcon();
icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
icon.iconSize = new GSize(12, 20);
icon.shadowSize = new GSize(22, 20);
icon.iconAnchor = new GPoint(6, 20);
icon.infoWindowAnchor = new GPoint(5, 1);



/////Draggable markers

var point = new GLatLng(62,25.5);
var markerD = new GMarker(point, {icon:icon, draggable: true}); 
map.addOverlay(markerD);

markerD.enableDragging();

GEvent.addListener(markerD, "drag", function(){
document.getElementById("location").value=markerD.getPoint().toUrlValue();
});


var point = new GLatLng(60,25);
var markerD2 = new GMarker(point, {icon:G_DEFAULT_ICON, draggable: true}); 
map.addOverlay(markerD2);

markerD2.enableDragging();

GEvent.addListener(markerD2, "drag", function(){
document.getElementById("location").value=markerD2.getPoint().toUrlValue();
});


/////Normal marker 

var point = new GLatLng(65,25)
var markerN = new GMarker(point); 
map.addOverlay(markerN);


////Mouse pointer

GEvent.addListener(map, "mousemove", function(point){
document.getElementById("mouse").value=point.toUrlValue();
});


//]]>

</script>

<div id="ilosanoma" style="position: absolute; top:520px; left:10px; width:500px; height:60px;">

<script type="text/javascript"><!--
google_ad_client = "pub-3649938975494252";
google_ad_width = 468;
google_ad_height = 60;
google_ad_format = "468x60_as";
google_ad_type = "text_image";
google_ad_channel ="2676021345";
google_color_border = "CCCCFF";
google_color_bg = "CCCCFF";
google_color_link = "0000CC";
google_color_url = "008000";
google_color_text = "000000";
//--></script>

<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

</div>
</body>
</html>
